<template>
    <div class="yl_login">
      <el-row justify="center" align="middle">
          <el-col :span="16">
              <el-form
                  ref="ruleFormRef"
                  class="ruleForm"
                :rules="rules"
                :model="loginForm">
                <div class="login_title">
                    <h1>省中医院医疗平台研发</h1>
                    <span>V2.0</span>
                </div>
                  <el-form-item prop="username">
                      <el-input placeholder="用户名"  clearable :prefix-icon="User" v-model="loginForm.username"></el-input>
                  </el-form-item>
                <el-form-item prop="password">
                      <el-input placeholder="密码"  clearable :prefix-icon="Lock" v-model="loginForm.password"></el-input>
                  </el-form-item>
                <el-form-item>
                   <el-button @click="login(ruleFormRef)" class="login_button" type="primary">登录</el-button>
                </el-form-item>
              </el-form>
          </el-col>
      </el-row>
    </div>
</template>

<script setup lang="ts">
    import {ref,reactive} from "vue"
    import {User,Lock} from '@element-plus/icons-vue'
    import {reqLogin} from '@/api/login'
    import {ElMessage} from "element-plus";
    import {useRouter} from "vue-router";

    let loginForm = reactive({
      username: "zhangsan",
      password: "zhangsan",

    })

    let ruleFormRef = ref('ruleFormRef');

    // 定义校验规则
    const rules = reactive({
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 6, max: 10, message: '用户名长度在6~10位', trigger: 'blur' },
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
      ],

    })

    let router = useRouter()

    // 登录方法
    const login = async (formEl) => {
      if (!formEl) return
      await formEl.validate(async (valid, fields) => {
        if (valid) {
          // 执行通过
          // console.log('submit!')
          let res = await reqLogin(loginForm);
          console.log(res);
          if (res.code == 200) {
            // 消息提示

            if (res.result == '登录失败') {
              ElMessage({
                type: "error",
                message: res.result
              });
            } else {
              ElMessage({
                type: "success",
                message: res.result
              });
            }
            // 本地存储
            localStorage.setItem("permissions",res.permissions)
            localStorage.setItem("token",res.token)
            // 跳转路由
            router.push('/home');
          }else {
            ElMessage({
              type: "error",
              message: res.result,
            })
          }
        } else {
          // 校验不通过执行
          console.log('error submit!', fields)
        }
      })
    }


</script>

<style lang="scss" scoped>
.yl_login {
  background-image: url("../../assets/login/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  .el-row{
    height: inherit;
    .ruleForm {
      background-color: white;
      border-radius: 10px;
      padding: 50px 60px;
      .login_title {
        display: flex;
        margin-bottom: 30px;
        align-items: end;
        h1 {
          font-size: 28px;
          color: #2691ff;
        }
      span {
        color: #999;
        font-size: 16px;
        margin-left: 10px;


      }
    }
      .login_button{
        width: 100%;
      }
  }
}
}
</style>